<!DOCTYPE html>
<html class="no-js" lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>圈圈</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Place favicon.png in the root directory -->
    <link rel="shortcut icon" href="https://array.320.io/static/img/favicon.png" type="image/x-icon" />
    <!-- Font Icons css -->
    <link rel="stylesheet" href="https://array.320.io/static/css/font-icons.css">
    <!-- plugins css -->
    <link rel="stylesheet" href="https://array.320.io/static/css/plugins.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="https://array.320.io/static/css/style.css">
    <!-- Responsive css -->
    <link rel="stylesheet" href="https://array.320.io/static/css/responsive.css">
</head>

<body>
    <!--[if lte IE 9]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
    <![endif]-->

    <!-- Add your site or application content here -->

    <!-- Body main wrapper start -->
    <div class="body-wrapper">

        <!-- HEADER AREA START (header-4) -->
        <header class="ltn__header-area ltn__header-8 section-bg-6">
            <!-- ltn__header-top-area start -->
            <div class="ltn__header-top-area top-area-color-white d-none">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="ltn__top-bar-menu">
                                <ul>
                                    <li><a href="mailto:info@webmail.com?Subject=Flower%20greetings%20to%20you"><i
                                                class="icon-mail"></i> info@webmail.com</a></li>
                                    <li><a href="locations.html"><i class="icon-placeholder"></i> 15/A, Nest Tower,
                                            NYC</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="top-bar-right text-right">
                                <div class="ltn__top-bar-menu">
                                    <ul>
                                        <li>
                                            <!-- ltn__language-menu -->
                                            <div class="ltn__drop-menu ltn__currency-menu ltn__language-menu">
                                                <ul>
                                                    <li><a href="#" class="dropdown-toggle"><span
                                                                class="active-currency">English</span></a>
                                                        <ul>
                                                            <li><a href="#">Arabic</a></li>
                                                            <li><a href="#">Bengali</a></li>
                                                            <li><a href="#">Chinese</a></li>
                                                            <li><a href="#">English</a></li>
                                                            <li><a href="#">French</a></li>
                                                            <li><a href="#">Hindi</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li>
                                            <!-- ltn__social-media -->
                                            <div class="ltn__social-media">
                                                <ul>
                                                    <li><a href="#" title="Facebook"><i
                                                                class="fab fa-facebook-f"></i></a></li>
                                                    <li><a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
                                                    </li>

                                                    <li><a href="#" title="Instagram"><i
                                                                class="fab fa-instagram"></i></a></li>
                                                    <li><a href="#" title="Dribbble"><i class="fab fa-dribbble"></i></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ltn__header-top-area end -->

            <!-- ltn__header-middle-area start -->
            <div class="ltn__header-middle-area ltn__header-sticky ltn__sticky-bg-white plr--5">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col logo-column">
                            <div class="site-logo">
                                <a th:href="@{/}"><img src="https://array.320.io/static/img/logo.png" alt="Logo"></a>
                            </div>
                        </div>
                        <div class="col header-menu-column">
                            <div class="header-menu d-none d-xl-block">
                                <nav>
                                    <div class="ltn__main-menu">
                                        <ul>
                                            <li class="menu-icon"><a th:href="@{/}">首页</a>
                                            </li>
                                            <li class="menu-icon"><a th:href="@{/articles}">所有文章</a>
                                                <ul>
                                                    <li><a th:href="@{/articles}">最新</a></li>
                                                    <li><a th:href="@{/articles}">最热</a></li>
                                                    <li><a th:href="@{/add}">发布文章</a></li>
                                                </ul>
                                            </li>
                                            <li class="menu-icon"><a href="#">风格分类</a>
                                                <ul>
                                                    <!-- http://localhost:8088/quanquan/article/tag/5 -->
                                                    <li><a th:href="@{/article/tag/5}">古风华服</a></li>
                                                    <li><a th:href="@{/article/tag/9}">JK</a></li>
                                                    <li><a th:href="@{/article/tag/10}">Lolita</a></li>
                                                    <li><a th:href="@{/articles}">其他<span
                                                                class="float-right">>></span></a>
                                                        <ul>
                                                            <li><a th:href="@{/article/tag/13}">唐装</a></li>
                                                            <li><a th:href="@{/article/tag/6}">二次元</a></li>
                                                            <li><a th:href="@{/article/tag/12}">旗袍</a></li>
                                                            <li><a th:href="@{/articles}">....</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="menu-icon"><a th:href="@{/deposit}">版权保护</a>
                                            </li>
                                            <li><a href="#">联系我们</a></li>
                                            <li class="menu-icon"><a th:href="@{/account}">我的</a>
                                                <ul>
                                                    <li><a th:href="@{/add}">发布文章</a></li>
                                                    <li><a th:href="@{/account}">我喜欢的</a></li>
                                                    <li><a th:href="@{/account}">我关注的</a></li>
                                                    <li><a th:href="@{/account}">我的好友</a></li>
                                                    <li><a th:href="@{/account}">我的消息</a></li>
                                                    <li><a th:href="@{/account}">我的账户</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                        </div>
                        <div class="col">
                            <div class="ltn__header-options">
                                <ul>
                                    <li class="d-none">
                                        <!-- ltn__currency-menu -->
                                        <!-- <div class="ltn__drop-menu ltn__currency-menu">
                                            <ul>
                                                <li><a href="#" class="dropdown-toggle"><span
                                                            class="active-currency">USD</span></a>
                                                    <ul>
                                                        <li><a href="login.html">USD - US Dollar</a></li>
                                                        <li><a href="wishlist.html">CAD - Canada Dollar</a></li>
                                                        <li><a href="register.html">EUR - Euro</a></li>
                                                        <li><a href="account.html">GBP - British Pound</a></li>
                                                        <li><a href="wishlist.html">INR - Indian Rupee</a></li>
                                                        <li><a href="wishlist.html">BDT - Bangladesh Taka</a></li>
                                                        <li><a href="wishlist.html">JPY - Japan Yen</a></li>
                                                        <li><a href="wishlist.html">AUD - Australian Dollar</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div> -->
                                    </li>
                                    <li>
                                        <!-- header-search-1 -->
                                        <div class="header-search-wrap">
                                            <div class="header-search-1">
                                                <div class="search-icon">
                                                    <i class="icon-magnifier  for-search-show"></i>
                                                    <i class="icon-magnifier-remove  for-search-close"></i>
                                                </div>
                                            </div>
                                            <div class="header-search-1-form">
                                                <form id="#234" method="get" action="#">
                                                    <input type="text" name="search" value="" placeholder="搜索..." />
                                                    <button type="submit">
                                                        <span><i class="icon-magnifier"></i></span>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <!-- user-menu -->
                                        <div class="ltn__drop-menu user-menu">
                                            <ul>
                                                <li>
                                                    <a th:href="@{/account}"><i class="icon-user"></i></a>
                                                    <ul>
                                                        <li><a th:href="@{/login}">登录</a></li>
                                                        <li><a th:href="@{/register}">注册</a></li>
                                                        <li><a th:href="@{/account}">我的账户</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <!-- header-wishlist -->
                                        <div class="header-wishlist">
                                            <a th:href="@{/account}"><i class="icon-heart"></i></a>
                                        </div>
                                    </li>
                                    <li>
                                        <!-- mini-cart 2 -->
                                        <div class="mini-cart-icon mini-cart-icon-2">
                                            <a href="#ltn__utilize-cart-menu" class="ltn__utilize-toggle">
                                                <span class="mini-cart-icon">
                                                    <i class="icon-envelope"></i>
                                                    <sup>0</sup>
                                                </span>
                                                <h6><span>消息中心</span> <span class="ltn__secondary-color">查看消息</span>
                                                </h6>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <!-- Mobile Menu Button -->
                                        <div class="mobile-menu-toggle d-xl-none">
                                            <a href="#ltn__utilize-mobile-menu" class="ltn__utilize-toggle">
                                                <svg viewBox="0 0 800 600">
                                                    <path
                                                        d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
                                                        id="top"></path>
                                                    <path d="M300,320 L540,320" id="middle"></path>
                                                    <path
                                                        d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
                                                        id="bottom"
                                                        transform="translate(480, 320) scale(1, -1) translate(-480, -318) ">
                                                    </path>
                                                </svg>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ltn__header-middle-area end -->
        </header>
        <!-- HEADER AREA END -->

        <!-- Utilize Cart Menu Start -->
        <div id="ltn__utilize-cart-menu" class="ltn__utilize ltn__utilize-cart-menu">
            <div class="ltn__utilize-menu-inner ltn__scrollbar">
                <div class="ltn__utilize-menu-head">
                    <span class="ltn__utilize-menu-title">消息中心</span>
                    <button class="ltn__utilize-close">×</button>
                </div>
                <div class="mini-cart-product-area ltn__scrollbar">
                </div>
                <div class="mini-cart-footer">
                    <div class="btn-wrapper">
                        <a href="#" class="theme-btn-1 btn btn-effect-1">回复</a>
                        <a href="#" class="theme-btn-2 btn btn-effect-2">删除</a>
                    </div>
                </div>

            </div>
        </div>
        <!-- Utilize Cart Menu End -->

        <!-- Utilize Mobile Menu Start -->
        <div id="ltn__utilize-mobile-menu" class="ltn__utilize ltn__utilize-mobile-menu">
            <div class="ltn__utilize-menu-inner ltn__scrollbar">
                <div class="ltn__utilize-menu-head">
                    <div class="site-logo">
                        <a th:href="@{/}"><img src="https://array.320.io/static/img/logo.png" alt="Logo"></a>
                    </div>
                    <button class="ltn__utilize-close">×</button>
                </div>
                <div class="ltn__utilize-menu-search-form">
                    <form action="#">
                        <input type="text" placeholder="搜索...">
                        <button><i class="fas fa-search"></i></button>
                    </form>
                </div>
                <div class="ltn__utilize-menu">
                    <ul>
                        <li><a th:href="@{/}">首页</a>
                        </li>
                        <li><a th:href="@{/articles}">所有文章</a>
                            <ul class="sub-menu">
                                <li><a th:href="@{/articles}">最新</a></li>
                                <li><a th:href="@{/articles}">最热</a></li>
                                <li><a th:href="@{/add}">发布文章</a></li>
                            </ul>
                        </li>
                        <li><a href="#">风格分类</a>
                            <ul class="sub-menu">
                                <li><a th:href="@{/article/tag/5}">古风华服</a></li>
                                <li><a th:href="@{/article/tag/9}">JK</a></li>
                                <li><a th:href="@{/article/tag/10}">Lolita</a></li>
                                <li><a th:href="@{/articles}">其他<span class="float-right">>></span></a>
                                    <ul>
                                        <li><a th:href="@{/article/tag/13}">唐装</a></li>
                                        <li><a th:href="@{/article/tag/6}">二次元</a></li>
                                        <li><a th:href="@{/article/tag/12}">旗袍</a></li>
                                        <li><a th:href="@{/articles}">....</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a th:href="@{/deposit}">版权保护</a>
                        </li>
                        <li><a href="#">联系我们</a></li>
                        <li><a th:href="@{/account}">我的</a>
                            <ul class="sub-menu">
                                <li><a th:href="@{/add}">发布文章</a></li>
                                <li><a th:href="@{/account}">我喜欢的</a></li>
                                <li><a th:href="@{/account}">我关注的</a></li>
                                <li><a th:href="@{/account}">我的好友</a></li>
                                <li><a th:href="@{/account}">我的消息</a></li>
                                <li><a th:href="@{/account}">我的账户</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="ltn__utilize-buttons ltn__utilize-buttons-2">
                    <ul>
                        <li>
                            <a th:href="@{/account}" title="我的账户">
                                <span class="utilize-btn-icon">
                                    <i class="far fa-user"></i>
                                </span>
                                我的账户
                            </a>
                        </li>
                        <!-- <li>
                            <a href="wishlist.html" title="Wishlist">
                                <span class="utilize-btn-icon">
                                    <i class="far fa-heart"></i>
                                    <sup>3</sup>
                                </span>
                                Wishlist
                            </a>
                        </li>
                        <li>
                            <a href="cart.html" title="Shoping Cart">
                                <span class="utilize-btn-icon">
                                    <i class="fas fa-shopping-cart"></i>
                                    <sup>5</sup>
                                </span>
                                Shoping Cart
                            </a>
                        </li> -->
                    </ul>
                </div>
                <div class="ltn__social-media-2">
                    <ul>
                        <li><a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#" title="Twitter"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#" title="Linkedin"><i class="fab fa-linkedin"></i></a></li>
                        <li><a href="#" title="Instagram"><i class="fab fa-instagram"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Utilize Mobile Menu End -->

        <!-- BREADCRUMB AREA START -->
        <div class="ltn__breadcrumb-area ltn__breadcrumb-area-4 ltn__breadcrumb-color-white---">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ltn__breadcrumb-inner text-center">
                            <h1 class="ltn__page-title">文章详情</h1>
                            <div class="ltn__breadcrumb-list">
                                <ul>
                                    <li><a th:href="@{/}">首页</a></li>
                                    <li><a href="#"></a>文章详情</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- BREADCRUMB AREA END -->

        <!-- PAGE DETAILS AREA START (blog-details) -->
        <div class="ltn__page-details-area ltn__blog-details-area mb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="ltn__blog-details-wrap">
                            <div class="ltn__page-details-inner ltn__blog-details-inner">
                                <div class="ltn__blog-meta">
                                    <ul>
                                        <li class="ltn__blog-author">
                                            <span>
                                                <a href="#">
                                                    <!-- <i class="icon-user" th:text=" ${articleDTO.author} ">by: Admin</i> -->
                                                    <i class="icon-user">洛水河神</i>
                                                </a>
                                            </span>
                                        </li>
                                        <li>
                                            <span th:text="${articleDTO.article.time}"> Nov 18, 2020</span>
                                        </li>
                                        <li class="ltn__blog-comment">
                                            <a href="#comment-area"><i class="icon-speech"
                                                    th:text="${articleDTO.comentCounts}"></i></a>
                                        </li>
                                    </ul>
                                </div>
                                <h3 class="ltn__blog-title blog-title-line" th:text="${articleDTO.article.title}"><a
                                        href="#">Lorem ipsum dolor sit amet, consectetur adipisic elit, sed do eiusmod
                                        tempor. </a></h3>

                                <p th:text="${articleDTO.article.content}">
                                    Viral dreamcatcher keytar typewriter, aest hetic offal umami. Aesthetic polaroid pug
                                    pitchfork post-ironic.
                                </p>

                                <img class="blog-details-main-image mb-15" th:each="img:${articleDTO.images}"
                                    th:src="@{/files/{id}(id=${img.name})}" alt="Image">

                                <!-- 
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commod consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolorel laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam.</p>
                             -->


                                <!-- <div class="row mt-30">
                                <div class="col-sm-6">
                                    <img src="https://array.320.io/static/img/blog/blog-details/1.jpg" alt="Image">
                                    <label>Image Caption Here</label>
                                </div>
                                <div class="col-sm-6">
                                    <img src="https://array.320.io/static/img/blog/blog-details/2.jpg" alt="Image">
                                </div>
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                            <blockquote>
                                Viral dreamcatcher keytar typewriter, aest hetic offal umami. Aesthetic polaroid pug pitchfork post-ironic.
                                <h6 class="ltn__secondary-color m-0 pt-15">Author Name</h6>
                            </blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incidi ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequd Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

                            <img class="alignleft" src="https://array.320.io/static/img/blog/blog-details/11.jpg" alt="Image">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.  </p>


                            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur expedita velit laboriosam est sint laborum eos assumenda, quam voluptatem adipisci, reprehenderit ut nobis blanditiis perspiciatis!</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, amet, fuga omnis eligendi sed cupiditate molestias enim autem animi est tempore ipsa corporis. Recusandae, quia.</p>
                             -->
                            </div>

                            <!-- blog-tags-social-media -->
                            <div class="ltn__blog-tags-social-media mt-20 row">
                                <div class="ltn__tagcloud-widget col-lg-7">
                                    <h4>标签：</h4>
                                    <ul>
                                        <li th:each="tag:${articleDTO.tags}">
                                            <a th:href="@{/article/tag/{id}(id=${tag.tid})}"
                                                th:text="${tag.tname}">古风</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="ltn__social-media text-right col-lg-5">
                                    <ul>
                                        <li><a href="#" title="收藏"><i class="icon-heart"></i></a></li>
                                        <li><a href="#" title="转载"><i class="icon-reply-1"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <!-- prev-next-btn -->
                            <div class="ltn__prev-next-btn row mb-50">
                                <div class="blog-prev col-lg-6">
                                    <div class="blog-prev-next-img">
                                        <a href="blog.html"><img src="https://array.320.io/static/img/small/1.jpg"
                                                alt="Image"></a>
                                    </div>
                                    <div class="blog-prev-next-info">
                                        <h3 class="ltn__blog-title"><a th:href="@{/article/{id}(id=${articleDTO.article.aid-1})}">上一篇</a></h3>
                                    </div>
                                </div>
                                <div class="blog-prev blog-next text-right col-lg-6">
                                    <div class="blog-prev-next-info">
                                        <h3 class="ltn__blog-title"><a th:href="@{/article/{id}(id=${articleDTO.article.aid+1})}">下一篇</a></h3>
                                    </div>
                                    <div class="blog-prev-next-img">
                                        <a href="#"><img src="https://array.320.io/static/img/small/2.jpg"
                                                alt="Image"></a>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <!-- comment-area -->
                            <div id="comment-area" class="ltn__comment-area mb-50">
                                <div class="ltn-author-introducing clearfix d-none">
                                    <div class="author-img">
                                        <img src="https://array.320.io/static/img/blog/author.jpg" alt="Author Image">
                                    </div>
                                    <div class="author-info">
                                        <h6></h6>
                                        <h1>Rosalina D. William</h1>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation is enougn for today.</p>
                                    </div>
                                </div>
                                <h4 class="title-2">还没有评论</h4>
                                <!-- <div id="comments" class="ltn__comment-inner">
                                    <ul>
                                        <li>
                                            <div class="ltn__comment-item clearfix">
                                                <div class="ltn__commenter-img">
                                                    <img src="https://array.320.io/static/img/testimonial/1.jpg"
                                                        alt="Image">
                                                </div>
                                                <div class="ltn__commenter-comment">
                                                    <h6><a href="#">Adam Smit</a></h6>
                                                    <span class="comment-date">20th May 2020</span>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                        Doloribus, omnis fugit corporis iste magnam ratione.</p>
                                                    <a href="#" class="ltn__comment-reply-btn"><i
                                                            class="icon-reply-1"></i>Reply</a>
                                                </div>
                                            </div>
                                            <ul>
                                                <li>
                                                    <div class="ltn__comment-item clearfix">
                                                        <div class="ltn__commenter-img">
                                                            <img src="https://array.320.io/static/img/testimonial/3.jpg"
                                                                alt="Image">
                                                        </div>
                                                        <div class="ltn__commenter-comment">
                                                            <h6><a href="#">Adam Smit</a></h6>
                                                            <span class="comment-date">21th May 2020</span>
                                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                                Doloribus, omnis fugit corporis iste magnam ratione.</p>
                                                            <a href="#" class="ltn__comment-reply-btn"><i
                                                                    class="icon-reply-1"></i>Reply</a>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <div class="ltn__comment-item clearfix">
                                                <div class="ltn__commenter-img">
                                                    <img src="https://array.320.io/static/img/testimonial/4.jpg"
                                                        alt="Image">
                                                </div>
                                                <div class="ltn__commenter-comment">
                                                    <h6><a href="#">Adam Smit</a></h6>
                                                    <span class="comment-date">25th May 2020</span>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                        Doloribus, omnis fugit corporis iste magnam ratione.</p>
                                                    <a href="#" class="ltn__comment-reply-btn"><i
                                                            class="icon-reply-1"></i>Reply</a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div> -->
                            </div>
                            <hr>
                            <!-- comment-reply -->
                            <div class="ltn__comment-reply-area ltn__form-box">
                                <h4 class="title-2">我要评论 </h4>
                                <form action="#">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <textarea placeholder="我要评论...."></textarea>
                                            <label class="mb-0 input-info-save"><input type="checkbox" name="agree">
                                                私密评论？</label>
                                            <div class="btn-wrapper">
                                                <button class="btn theme-btn-1 btn-effect-1 text-uppercase"
                                                    type="submit">评论</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <aside class="sidebar-area blog-sidebar ltn__right-sidebar">
                            <!-- Search Widget -->
                            <div class="widget ltn__search-widget">
                                <form action="#">
                                    <input type="text" name="search" placeholder="搜索">
                                    <button type="submit"><i class="fas fa-search"></i></button>
                                </form>
                            </div>
                            <!-- Author Widget -->
                            <div class="widget ltn__author-widget">
                                <div class="ltn__author-widget-inner">
                                    <img src="https://array.320.io/static/img/avatar/avatar1.jpg" alt="Image">
                                    <h5>洛水河神</h5>
                                    <h6>水工部</h6>
                                    <p class="d-none">水不在深，有龙则灵。</p>
                                    <div class="ltn__social-media d-none">
                                        <ul>
                                            <li><a href="#" title="Facebook"><i class="icon-social-facebook"></i></a>
                                            </li>
                                            <li><a href="#" title="Twitter"><i class="icon-social-twitter"></i></a></li>
                                            <li><a href="#" title="Pinterest"><i class="icon-social-pinterest"></i></a>
                                            </li>
                                            <li><a href="#" title="Instagram"><i class="icon-social-instagram"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- Popular Post Widget -->
                            <!-- <div class="widget ltn__popular-post-widget">
                            <h4 class="ltn__widget-title">最近动态</h4>
                            <ul>
                                <li>
                                    <div class="popular-post-widget-item clearfix">
                                        <div class="popular-post-widget-img">
                                            <a href="blog-details.html"><img src="https://array.320.io/static/img/small/3.jpg" alt="#"></a>
                                        </div>
                                        <div class="popular-post-widget-brief">
                                            <div class="ltn__blog-meta">
                                                <ul>
                                                    <li class="ltn__blog-author d-none">
                                                        <a href="#">by: Admin</a>
                                                    </li>
                                                    <li>
                                                        <span> Nov 18, 2020</span>
                                                    </li>
                                                    <li class="ltn__blog-comment">
                                                        <a href="#"><i class="icon-speech"></i> 2</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <h6 class="ltn__blog-title blog-title-line"><a href="blog-details.html">Lorem ipsum dolor sit cing elit, sed do.</a></h6>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="popular-post-widget-item clearfix">
                                        <div class="popular-post-widget-img">
                                            <a href="blog-details.html"><img src="https://array.320.io/static/img/small/1.jpg" alt="#"></a>
                                        </div>
                                        <div class="popular-post-widget-brief">
                                            <div class="ltn__blog-meta">
                                                <ul>
                                                    <li class="ltn__blog-author d-none">
                                                        <a href="#">by: Admin</a>
                                                    </li>
                                                    <li>
                                                        <span> Nov 18, 2020</span>
                                                    </li>
                                                    <li class="ltn__blog-comment">
                                                        <a href="#"><i class="icon-speech"></i> 2</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <h6 class="ltn__blog-title blog-title-line"><a href="blog-details.html">Lorem ipsum dolor sit cing elit, sed do.</a></h6>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="popular-post-widget-item clearfix">
                                        <div class="popular-post-widget-img">
                                            <a href="blog-details.html"><img src="https://array.320.io/static/img/small/2.jpg" alt="#"></a>
                                        </div>
                                        <div class="popular-post-widget-brief">
                                            <div class="ltn__blog-meta">
                                                <ul>
                                                    <li class="ltn__blog-author d-none">
                                                        <a href="#">by: Admin</a>
                                                    </li>
                                                    <li>
                                                        <span> Nov 18, 2020</span>
                                                    </li>
                                                    <li class="ltn__blog-comment">
                                                        <a href="#"><i class="icon-speech"></i> 2</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <h6 class="ltn__blog-title blog-title-line"><a href="blog-details.html">Lorem ipsum dolor sit cing elit, sed do.</a></h6>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="popular-post-widget-item clearfix">
                                        <div class="popular-post-widget-img">
                                            <a href="blog-details.html"><img src="https://array.320.io/static/img/small/4.jpg" alt="#"></a>
                                        </div>
                                        <div class="popular-post-widget-brief">
                                            <div class="ltn__blog-meta">
                                                <ul>
                                                    <li class="ltn__blog-author d-none">
                                                        <a href="#">by: Admin</a>
                                                    </li>
                                                    <li>
                                                        <span> Nov 18, 2020</span>
                                                    </li>
                                                    <li class="ltn__blog-comment">
                                                        <a href="#"><i class="icon-speech"></i> 2</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <h6 class="ltn__blog-title blog-title-line"><a href="blog-details.html">Lorem ipsum dolor sit cing elit, sed do.</a></h6>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div> -->
                            <!-- Category Widget -->
                            <div class="widget ltn__menu-widget">
                                <h4 class="ltn__widget-title">版块</h4>
                                <ul>
                                    <li><a th:href="@{/articles}">综合区</a></li>
                                </ul>
                            </div>
                            <!-- Tagcloud Widget -->
                            <div class="widget ltn__tagcloud-widget">
                                <h4 class="ltn__widget-title">标签</h4>
                                <ul>
                                    <li th:each="tag:${articleDTO.tags}">
                                        <a th:href="@{/article/tag/{id}(id=${tag.tid})}"
                                            th:text="${tag.tname}">Popular</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- Social Media Widget -->
                            <div class="widget ltn__social-media-widget d-none">
                                <h4 class="ltn__widget-title ltn__widget-title-border">Never Miss News</h4>
                                <div class="ltn__social-media-2">
                                    <ul>
                                        <li><a href="#" title="Facebook"><i class="icon-social-facebook"></i></a></li>
                                        <li><a href="#" title="Twitter"><i class="icon-social-twitter"></i></a></li>
                                        <li><a href="#" title="Pinterest"><i class="icon-social-pinterest"></i></a></li>
                                        <li><a href="#" title="Instagram"><i class="icon-social-instagram"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Popular Post Widget (Twitter Post) -->
                            <div class="widget ltn__popular-post-widget ltn__twitter-post-widget d-none">
                                <h4 class="ltn__widget-title ltn__widget-title-border">Twitter Feeds</h4>
                                <ul>
                                    <li>
                                        <div class="popular-post-widget-item clearfix">
                                            <div class="popular-post-widget-img">
                                                <a href="blog-details.html"><i class="fab fa-twitter"></i></a>
                                            </div>
                                            <div class="popular-post-widget-brief">
                                                <p>Carsafe - #Gutenberg ready
                                                    @wordpress
                                                    Theme for Car Service, Auto Parts, Car Dealer available on
                                                    @website
                                                    <a href="https://website.net">https://website.net</a>
                                                </p>
                                                <div class="ltn__blog-meta">
                                                    <ul>
                                                        <li class="ltn__blog-date">
                                                            <a href="#"><i class="far fa-calendar-alt"></i>June 22,
                                                                2020</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="popular-post-widget-item clearfix">
                                            <div class="popular-post-widget-img">
                                                <a href="blog-details.html"><i class="fab fa-twitter"></i></a>
                                            </div>
                                            <div class="popular-post-widget-brief">
                                                <p>Carsafe - #Gutenberg ready
                                                    @wordpress
                                                    Theme for Car Service, Auto Parts, Car Dealer available on
                                                    @website
                                                    <a href="https://website.net">https://website.net</a>
                                                </p>
                                                <div class="ltn__blog-meta">
                                                    <ul>
                                                        <li class="ltn__blog-date">
                                                            <a href="#"><i class="far fa-calendar-alt"></i>June 22,
                                                                2020</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="popular-post-widget-item clearfix">
                                            <div class="popular-post-widget-img">
                                                <a href="blog-details.html"><i class="fab fa-twitter"></i></a>
                                            </div>
                                            <div class="popular-post-widget-brief">
                                                <p>Carsafe - #Gutenberg ready
                                                    @wordpress
                                                    Theme for Car Service, Auto Parts, Car Dealer available on
                                                    @website
                                                    <a href="https://website.net">https://website.net</a>
                                                </p>
                                                <div class="ltn__blog-meta">
                                                    <ul>
                                                        <li class="ltn__blog-date">
                                                            <a href="#"><i class="far fa-calendar-alt"></i>June 22,
                                                                2020</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!-- Instagram Widget -->
                            <div class="widget ltn__instagram-widget d-none">
                                <h4 class="ltn__widget-title ltn__widget-title-border">Instagram Feeds</h4>
                                <div class="ltn__instafeed ltn__instafeed-grid insta-grid-gutter"></div>
                            </div>
                            <!-- Banner Widget -->
                            <div class="widget ltn__banner-widget d-none">
                                <a href="shop.html"><img src="https://array.320.io/static/img/banner/1.jpg"
                                        alt="Banner Image"></a>
                            </div>

                        </aside>
                    </div>
                </div>
            </div>
        </div>
        <!-- PAGE DETAILS AREA END -->

        <!-- BRAND LOGO AREA START -->
        <div class="ltn__brand-logo-area  ltn__brand-logo-1 section-bg-1 pt-35 pb-35 plr--5">
            <div class="container-fluid">
                <div class="row ltn__brand-logo-active">
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/1.png" alt="Brand Logo">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/2.png" alt="Brand Logo">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/3.png" alt="Brand Logo">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/4.png" alt="Brand Logo">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/5.png" alt="Brand Logo">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/1.png" alt="Brand Logo">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="ltn__brand-logo-item">
                            <img src="https://array.320.io/static/img/brand-logo/2.png" alt="Brand Logo">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- BRAND LOGO AREA END -->

        <!-- FOOTER AREA START -->
        <footer class="ltn__footer-area ">
            <div class="footer-top-area  section-bg-5">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-2 col-md-6 col-sm-6 col-12">
                            <div class="footer-widget footer-menu-widget clearfix">
                                <h4 class="footer-title">我的账户</h4>
                                <div class="footer-menu">
                                    <ul>
                                        <li><a th:href="@{/account}">我的账户</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-md-6 col-sm-6 col-12">
                            <div class="footer-widget footer-menu-widget clearfix">
                                <h4 class="footer-title">快速链接</h4>
                                <div class="footer-menu">
                                    <ul>
                                        <li><a href="http://www.ncac.gov.cn/">国家版权局</a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-md-6 col-sm-6 col-12">
                            <div class="footer-widget footer-menu-widget clearfix">
                                <h4 class="footer-title">相关信息</h4>
                                <div class="footer-menu">
                                    <ul>
                                        <li><a href="#">免责声明</a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-2 col-md-6 col-sm-6 col-12">
                            <div class="footer-widget footer-menu-widget clearfix">
                                <h4 class="footer-title">客户服务</h4>
                                <div class="footer-menu">
                                    <ul>
                                        <li><a href="#">侵权申诉</a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                        <li><a href="#"></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-md-6 col-sm-6 col-12">
                            <div class="footer-widget footer-about-widget">
                                <h4 class="footer-title">关于我们</h4>
                                <div class="footer-logo d-none">
                                    <div class="site-logo">
                                        <img src="https://array.320.io/static/img/logo.png" alt="Logo">
                                    </div>
                                </div>
                                <p>基于区块链存证保护原创的小众服饰文化交流圈</p>
                                <div class="footer-address">
                                    <ul>
                                        <li>
                                            <div class="footer-address-icon">
                                                <i class="icon-location-pin"></i>
                                            </div>
                                            <div class="footer-address-info">
                                                <p>云南大学</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="footer-address-icon">
                                                <i class="icon-phone"></i>
                                            </div>
                                            <div class="footer-address-info">
                                                <p><a href="tel:+0123-456789">+0123-456789</a></p>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="footer-address-icon">
                                                <i class="icon-envelope"></i>
                                            </div>
                                            <div class="footer-address-info">
                                                <p><a href="mailto:admin@array.320.io">admin@array.320.io</a></p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="ltn__social-media mt-20 d-none">
                                    <ul>
                                        <li><a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#" title="Twitter"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#" title="Linkedin"><i class="fab fa-linkedin"></i></a></li>
                                        <li><a href="#" title="Youtube"><i class="fab fa-youtube"></i></a></li>
                                    </ul>
                                </div>
                                <div class="footer-payment-img">
                                    <img src="https://array.320.io/static/img/icons/payment-6.png" alt="Payment Image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ltn__copyright-area ltn__copyright-2 section-bg-5">
                <div class="container ltn__border-top-2">
                    <div class="row">
                        <div class="col-md-6 col-12">
                            <div class="footer-copyright-left">
                                <div class="ltn__copyright-design clearfix">
                                    <p>&copy; 圈圈<span class="current-year"></span> —— 基于区块链存证保护原创的小众服饰文化交流圈</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-12 align-self-center">
                            <div class="footer-copyright-right text-right">
                                <div class="ltn__copyright-menu d-none">
                                    <ul>
                                        <li><a href="#">Terms & Conditions</a></li>
                                        <li><a href="#">Claim</a></li>
                                        <li><a href="#">Privacy & Policy</a></li>
                                    </ul>
                                </div>
                                <div class="ltn__social-media ">
                                    <ul>
                                        <li><a href="#" title="Facebook"><i class="icon-social-facebook"></i></a></li>
                                        <li><a href="#" title="Twitter"><i class="icon-social-twitter"></i></a></li>
                                        <li><a href="#" title="Pinterest"><i class="icon-social-pinterest"></i></a></li>
                                        <li><a href="#" title="Instagram"><i class="icon-social-instagram"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- FOOTER AREA END -->

    </div>
    <!-- Body main wrapper end -->

    <!-- preloader area start -->
    <div class="preloader d-none" id="preloader">
        <div class="preloader-inner">
            <div class="spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </div>
    </div>
    <!-- preloader area end -->

    <!-- All JS Plugins -->
    <script src="https://array.320.io/static/js/plugins.js"></script>
    <!-- Main JS -->
    <script src="https://array.320.io/static/js/main.js"></script>


</body>

</html>